<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>单一事件管理组件通信</title>
	<script type="text/javascript" src="js/vue2.js"></script>
	<script type="text/javascript">
        // 建立一个空的实例对象 全局的   $emit $on
        var ev = new Vue();
        var A = {
            template:`
                <div>
                    <span>我是A组件</span> =》{{a}}
                    <input type="button" name="" value="把数据传给c" @click="send()">
                </div>
            `,
            data(){
                return {
                    a:"我是a数据"
                }
            },
            methods:{
                send(){
                   ev.$emit("a_msg",this.a); 
                }
            }
        };
        var B = {
            template:`
                <div>
                    <span>我是B组件</span> =》{{a}}
                    <input type="button" name="" value="把数据传给c" @click="send()">
                </div>
            `,
             data(){
                return {
                    a:"我是b数据"
                }
            },
            methods:{
                send(){
                    ev.$emit("b_msg",this.a);
                }
            }
        };
        var C = {
            template:`
                <div>
                    <p>来自A的数据====》 {{a}}</p>
                    <p>来自B的数据====》 {{b}}</p>
                </div>
            `,
            data(){
                return {
                    a:"",
                    b:""
                }
            },
            mounted(){
                // var _this = this;  可以在外面声明下 也可以绑定给函数
               ev.$on("a_msg",function(a){
                //    _this.a = a;  
                    this.a = a;
               }.bind(this));

               ev.$on("b_msg",function(b){
                   this.b = b;
               }.bind(this));
            }
        }
        window.onload = function(){	
            new Vue({
                el:"#box",
                components:{
                    "c_a":A,
                    "c_b":B,
                    "c_c":C 
                }
            });
        }
	
    </script>
</head>
<body>
    <div id="box">
        <c_a></c_a>
        <br>
        <c_b></c_b>
         <br>
        <c_c></c_c>
    </div>
</body>
</html>